<template>
  <div class="box">
    <!-- 把注册好的组件当成标签使用 -->
    <h4>使用v-midel</h4>
    <input type="text" v-model="keyWord" />

    <h4>不使用v-model</h4>
    <input type="text" :value="keyWord" @input="addss" />

    <!-- 组件标签呢? -->
    <!-- 组件也可以使用v-model,组件的v-model需要自己实现 -->
    <!-- 这时我们修改父组件的数据 子组件因为单项数据流,也会进行修改 -->
    <h4>组件标签-不使用v-model</h4>
    <!-- 组件标签需要监听到由子组件传递过来的自定义事件 -->
    <!-- <CustomInput :value="keyWord" @xxx="changeInput"></CustomInput> -->
    <!-- 可以简写 -->
    <CustomInput :value="keyWord" @input="keyWord = $event"></CustomInput>

    <h4>组件标签-使用v-model</h4>
    <CustomInput v-model="keyWord"></CustomInput>
    <!-- 使用v-model实现父子组件之间的数据同步的前提 -->
    <!-- <CustomInput v-model="keyWord"></CustomInput> === <CustomInput :value="keyWord" @input="keyWord = $event"></CustomInput> -->

    <!-- 子组件必须使用 value 来接收值,想要修改值,则自定义事件的名称必须是 input  -->
  </div>
</template>

<script>
// 结论:
//      v-model指令用于组件,组件[必须]实现两个条件
//      1.  :value  --- 目的是给子组件传参(可以用作展示)
//      2.  @input  --- 触发input自定义事件修改数据的
// 组件使用v-model是为了让调用组件的人省劲呢,封装当前这个组件的人并不省劲
// 所以调用的时候使用v-model,封装这个组件的人必须给组件实现这两个条件: 1. :value  2. @input
// v-model组件上使用哪里见过:
//      在element ui 中的 el-input组件,使用的就是 v-model 指令
//      他这个组件在实现的时候,一定实现了这两个条件  1. :value  2. @input
// 场景:
//      一般情况下,封装组件的时候,封装的是input框,此时使用 v-model 比较合适
// 补充:
//      v-model 在组件上使用,是父子组件之间的数据同步
// 导入组件
import CustomInput from './CustomInput.vue'
export default {
  name: 'ModelTest',
  data() {
    return {
      // 如果初始data中的变量有数据
      // 我们就需要使用 v-bind 来给不使用v-model的输入框来绑定值
      keyWord: '15612006653'
    }
  },
  // 注册组件
  components: {
    CustomInput
  },
  methods: {
    addss(e) {
      this.keyWord = e.target.value
    },
    changeInput(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped></style>
